import React from 'react';
import { FieldProps } from '@rjsf/utils';
import { Button, Flex } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Icon } from '@amcax/base';
import styles from './styles.module.scss';

// 选择器
export const ButtonField = ({
  uiSchema,
  schema,
  onClick,
  disabled,
}: FieldProps<string>) => {
  const position = uiSchema['ui:position'] ?? 'flex-end';
  const iconName = uiSchema['ui:icon'];
  const disabledBoolean = disabled
    ? disabled
    : (uiSchema['ui:disabled'] ?? false);
  return (
    <Flex
      style={{ gap: 4, justifyContent: position }}
      className='items-center'>
      <Button
        className={styles._btn}
        disabled={disabledBoolean}
        style={{ gap: 4 }}
        icon={
          iconName ? (
            <Icon name={iconName} />
          ) : (
            (iconName ?? <SearchOutlined />) || ''
          )
        }
        onClick={onClick}>
        {schema.title}
      </Button>
    </Flex>
  );
};
